<template>
  <div class="search">
    <!-- search-bar -->
    <van-search class="search-bar" v-model="keyword" show-action placeholder="请输入搜索关键词" @keydown.enter="onSearch" fixed>
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
      <template #label>
        <div>

        </div>
      </template>
    </van-search>
    <!-- search-bar -->

    <!-- 自定义刷新提示 start -->
    <van-pull-refresh class="auto-refresh" v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <!-- <p>刷新次数: {{ count }}</p> -->

      <!-- 搜索到的商品列表start -->
      <div class="goods-list">
        <div class="goods-item" v-for="(goods,index) in goodsList" :key="index" @click="goDetail(goods.id)">
          <div class="imgbox">
            <img v-lazy="goods.pictUrl" alt="">
          </div>
          <p class="g-title">{{goods.title}}</p>
          <p class="g-price">{{goods.Price}}</p>
          <p class="g-store">{{goods.shopTitle}}</p>
        </div>
      </div>
      <p class="no-more">没有更多了哦~ 搜搜其它的吧</p>
      <!-- 搜索到的商品列表end -->

    </van-pull-refresh>
    <!-- 自定义刷新提示 end -->

  </div>
</template>
<script>
import { Toast } from 'vant'
import { getGoods } from '@/api/home.js'
export default {
  data() {
    return {
      keyword: '',
      count: 0,
      isLoading: false,
      goodsList: []
    }
  },
  created() {
    this.getGoodsList(this.$store.state.search.keyword)
  },
  methods: {
    async getGoodsList(keyword) {
      const res = await getGoods(keyword || '热门')
      this.goodsList = res.data.data
      this.$store.commit('goods/SET_GOODS_LIST', this.goodsList)
    },
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    onSearch() {
      if (!this.keyword) return Toast('您还未输入搜索内容')
      this.getGoodsList(this.keyword)
      this.keyword = ''
    },
    goDetail(id) {
      this.$router.push('/home/goodsInfo/' + id)
    }

  }
}
</script>
<style lang="scss">
.search {
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    .goods-item {
      width: 100px;
      margin: 12px;
      padding: 5px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      .imgbox {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .g-title,
      .g-store {
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 12px;
        // display: -webkit-box;
        // -webkit-line-clamp: 1;
      }
      .g-price {
        width: 100%;
        color: #ff2900;
        font-weight: 600;
      }
      .g-store {
        color: #999;
      }
    }
  }
  .no-more {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #999;
  }
}
</style>